<template>
  <u-popup :show="showDialog" mode="center" round="8" closeable @close="closeDialog">
    <view class="dialog_box">
      <view>购买信息填写</view>
      <view class="input_wrap" v-if="popType == 'all'">
        <u--input placeholder="请输入姓名" border="surround" v-model="formData.nameValue"></u--input>
      </view>
      <view class="input_wrap" :class="{ only_phone: popType == 'phone' }" v-if="popType == 'phone' || popType == 'all'">
        <u--input placeholder="请输入电话" border="surround" v-model="formData.phoneValue"></u--input>
      </view>
      <view class="input_wrap" v-if="popType == 'all'">
        <u--input placeholder="请输入邮箱" border="surround" v-model="formData.emailValue"></u--input>
      </view>
      <view class="submit_btn" @click="submitOrder">提交</view>
      <u-toast ref="dialogToast"></u-toast>
    </view>
  </u-popup>
</template>
<script>
export default {
  data () {
    return {
      showDialog: false,
      formData: {
        nameValue: '',
        phoneValue: '',
        emailValue: '',
      }
    }
  },
  props: {
    popType: {
      type: String,
      default: "all"
    }
  },
  methods: {
    openDialog () {
      this.showDialog = true;
    },
    closeDialog () {
      this.showDialog = false
    },
    submitOrder () {
      if (this.popType == 'phone' && this.formData.phoneValue == '') {
        this.$refs.dialogToast.show({
          type: 'error',
          icon: false,
          message: `请填写手机号`,
        })
        return
      }
      if (this.popType == 'all' && (this.formData.nameValue == '' || this.formData.phoneValue == '' || this.formData.emailValue == '')) {
        this.$refs.dialogToast.show({
          type: 'error',
          icon: false,
          message: `请填写完整`,
        })
        return
      }
      this.$emit('submit', this.formData)
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog_box {
  width: 650rpx;
  padding: 26rpx 26rpx 0 26rpx;
  box-sizing: border-box;

  .input_wrap {
    margin-top: 24rpx;
  }


  .submit_btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
    color: #fff;
    font-size: 30rpx;
    text-align: center;
    line-height: 88rpx;
    margin-top: 24rpx;
    border-radius: 16rpx;
  }
}
</style>